<template>
  <div class="user-manage">
    <div class="page-title">
      <div>居民列表</div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="username"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="code"
        label="身份证号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话号码">
      </el-table-column>
      <el-table-column label="性别">
        <template scope="props">
          <el-button size="small" :type="props.row.sex ? 'success' : 'primary'">
            {{ props.row.sex ? '女' : '男' }}
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="所在群组">
        <template scope="props">
          <el-button size="small" type="text" v-popover:popover1>查看
            <el-popover
              ref="popover1"
              placement="top-start"
              width="200"
              trigger="hover"
              :content="props.row.tag">
            </el-popover>
          </el-button>
          <el-badge :value="props.row.tag.length" class="item"/>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script>
  import {httpGet} from '../../util/api'

  export default {
    name: 'user-manage',
    data() {
      return {
        tableData: [],
      }
    },
    methods: {
      init() {
        httpGet('/user').then((response) => {
          this.tableData = response.data.result.data
        })
      },
    },
    created() {
      this.init()
    }
  }
</script>


<style lang="scss">

</style>
